<template>
  <div class="van-collapse-setStyle">
    <div>
      <custom-title :is-line="true" title="基本信息" />
      <div class="base-info">
        <div v-for="(item, index) in descList" :key="index + 'base'">
          <custom-details-item :icon="item.icon" :label="item.label">
            <template #valueSlot>
              <!-- 附件 -->
              <template v-if="item.field ==='checkTaskAttachList'">
                <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
              </template>
              <!-- 检查组 -->
              <template v-else-if="item.field === 'checkPersonList'">
                <span v-for="it in item.value" :key="it.checkTeamId + 'checkPerson'">{{ it.checkTeamName }}（组长：{{ it.expertLeader }}）</span>
              </template>
              <template v-else>
                <span>{{ item.value || '/' }}</span>
              </template>
            </template>
          </custom-details-item>
        </div>
      </div>
      <custom-title :is-line="true" title="检查内容" />

      <div class="check-content">
        <van-collapse v-if="infoData && infoData.length>0" v-model="activeNames">
          <van-collapse-item v-for="(item, index) in infoData" :key="index" :title="(index + 1) + '、' + item.label" :name="item.label">
            <div class="listInner">
              <div class="common_list">
                <div v-for="(items) in item.cont" :key="items.checkContentId" class="list_item">
                  <div class="content_area">
                    <div class="right_content">
                      <div class="content_title" style="max-width: 100%">
                        {{ items.twoElement !== '' ? items.twoElement + '-' + items.threeElement : '/-' + items.threeElement }}
                      </div>
                      <ul>
                        <li>
                          <div class="label">业务类型：</div>
                          <div class="value allowWrap">{{ items.moduleName }}</div>
                        </li>
                        <li>
                          <div class="label">检查事项：</div>
                          <div class="value allowWrap">{{ items.checkContent }}</div>
                        </li>
                        <li>
                          <div class="label">标准分：</div>
                          <div class="value allowWrap">{{ items.standardScore }}</div>
                        </li>
                        <li>
                          <div class="label">评分标准：</div>
                          <div class="value allowWrap">{{ items.gradStandards }}</div>
                        </li>
                        <li>
                          <div class="label">检查依据：</div>
                          <div class="value allowWrap">{{ items.checkGist }}</div>
                        </li>
                        <li>
                          <div class="label">重要程度：</div>
                          <div class="value allowWrap">{{ items.checkWay }}</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <el-empty v-else />
      </div>
      <van-popup
        v-model="companyListShow"
        get-container="body"
        position="right"
        :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        lock-scroll
        safe-area-inset-bottom
        close-on-popstate
        class="custom-van-pop"
      >
        <div class="pop-title">企业检查详情</div>
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <companyList />
          </div>
        </div>
      </van-popup>

    </div>
    <attach-pop-up ref="attachPopUp" file-name-key="attachName" file-url-key="attachUuid" />
  </div>
</template>
<script>
import _ from 'lodash'
import companyList from './companyList.vue'
import { planDangersCheckTaskDetails } from '@/api/commonPage/dangerTreatment'
import commonList from '@/assets/mixin/commonList'
import AttachPopUp from '@/components/globals/attachPopUp.vue'

export default {
  components: {
    AttachPopUp,
    companyList
  },
  mixins: [commonList],
  data() {
    return {
      companyListShow: false,
      activeNames: [],
      descList: [
        { field: 'years', label: '所属年份', icon: '&#xe8d5;', value: '' },
        { field: 'checkTaskName', label: '检查计划名称', icon: '&#xe62c;', value: '' },
        { field: 'checkType', label: '检查类型', icon: '&#xe6aa;', value: '' },
        { field: 'checkTime', label: '计划检查日期', icon: '&#xe617;', value: '' },
        { field: 'checkTaskAttachList', label: '附件', icon: '&#xe677;', value: [] },
        { field: 'issueTime', label: '下发时间', icon: '&#xe685;', value: '' },
        { field: 'checkPersonList', label: '检查组', icon: '&#xe700;', value: [] },
        { field: 'taskScheduleDesc', label: '任务完成进度', icon: '&#xe64d;', value: '' }
      ],
      infoData: []
    }
  },
  computed: {

  },
  mounted() {
    this.$nextTick(() => {
      this.dangersCheckTaskDetails()
    })
  },
  methods: {
    openCompanyList() {
      this.companyListShow = true
    },
    async dangersCheckTaskDetails() {
      this.layout.showAreaLoading(['.base-info', '.check-content'])
      const { data, status } = await planDangersCheckTaskDetails({
        checkTaskId: this.$route.query.checkTaskId
      })
      if (status === 0 && data) {
        this.descList.forEach(v => {
          if (v.field === 'checkPersonList' || v.field === 'checkTaskAttachList') {
            v.value = data[v.field] ? data[v.field] : []
          } else {
            v.value = data[v.field] ? data[v.field] : '/'
          }
        })
        const oneElement = _.uniq(data.checkContentList.map(x => {
          return x.oneElement
        }))
        this.infoData = oneElement.map(x => {
          return {
            label: x,
            cont: data.checkContentList.filter(z => { return z.oneElement === x })
          }
        })
        this.activeNames = this.infoData.length ? [this.infoData[0].label] : []
      }
      this.layout.hideAreaLoading(['.base-info', '.check-content'])
    }
  }
}
</script>
<style scoped lang="scss">
.bottom-box{
z-index: 9999;
position: fixed;
bottom: 0px;
min-height: 100px;
width: 100%;
left:0rem;
// margin-left: -0.5rem !important;
background-color: rgba(255, 255, 255,0.9);
box-shadow: 0px -8px 8px rgba(0,0,0,0.4);
.el-button{
margin: auto;
}
}

.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
  }

  .pop-content {
    // background-color: #fff;
    margin: 0 0rem ;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>
<style>
.van-tabs__line{
  background: var(--blue);
}

</style>
